<template>
  <div class="app-container">
    <!-- 顶部菜单选项 -->
    <div class="operationArea">
      <el-input v-model="query" placeholder="在此搜索" style="width: 200px;" class="filter-item" />
      <el-select v-model="queryMode" placeholder="搜索模式" clearable style="width: 110px; margin-left: 10px;" class="filter-item">
        <el-option v-for="item in queryModeSelect" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        添加
      </el-button>
      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        下载表格
      </el-button>
      <el-button type="danger" @click="handleDeleteAll">
        删除
      </el-button>
    </div>
    <!-- 学生信息表 -->
    <el-table
      v-loading="listLoading"
      :data="listData"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        align="center"
        width="55">
      </el-table-column>
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="学号" align="center">
        <template slot-scope="scope">
          {{ scope.row.studentId }}
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sex }}</span>
        </template>
      </el-table-column>
      <el-table-column label="适应期小组" align="center">
        <template slot-scope="scope">
          {{ scope.row.group }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="方向" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.direction | statusFilter">{{ scope.row.direction }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="省份">
        <template slot-scope="scope">
          <span>{{ scope.row.province }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="学院">
        <template slot-scope="scope">
          <span>{{ scope.row.college }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="专业">
        <template slot-scope="scope">
          <span>{{ scope.row.major }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="专业班级">
        <template slot-scope="scope">
          <span>{{ scope.row.majorClass }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row,$index)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row,$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
    <!-- 增改信息对话框 -->
    <el-dialog title="请填写相关信息" :visible.sync="dialogFormVisible" top="5vh">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="90px" style="width: 400px; margin-left:50px;">
        <el-form-item label="学号" prop="studentId">
          <el-input v-model="temp.studentId" placeholder="请输入学号" />
        </el-form-item>
        <el-form-item label="学号" prop="name">
          <el-input v-model="temp.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="temp.sex" placeholder="请选择性别">
            <el-option v-for="item in [{label:'男',value:'男'},{label:'女',value:'女'}]" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="组数" prop="group">
          <el-input v-model="temp.group" placeholder="请输入组数" />
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select v-model="temp.direction" placeholder="请选择方向">
            <el-option v-for="item in directionSelect" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-input v-model="temp.province" placeholder="请输入省份" />
        </el-form-item>
        <el-form-item label="学院" prop="college">
          <el-input v-model="temp.college" placeholder="请输入学院名称" />
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="temp.major" placeholder="请输入专业名称" />
        </el-form-item>
        <el-form-item label="专业班级" prop="majorClass">
          <el-input v-model="temp.majorClass" placeholder="请输入专业半截" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from '@/api/table'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        '人工智能': 'success',
        'CPU&OS': 'gray',
        'JAVA': 'danger',
        '全栈': 'info',
        '设计': 'info',
        '秘书处': 'info'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      // 表格是否加载中
      listLoading: true,
      // 是否正在下载表格信息
      downloadLoading: false,
      // 是否展示对话框
      dialogFormVisible: false,
      // 对话框状态
      dialogStatus: '',
      // 如果是编辑状态 正在编辑者的下标
      editingIndex: null,
      // 搜索框内容
      query: '',
      // 搜索模式
      queryMode: '',
      // 搜索模式选项
      queryModeSelect: [
        {
          value: 'name',
          label: '姓名'
        },
        {
          value: 'studentId',
          label: '学号'
        }
      ],
      // 列表信息
      listData: [{
        id: '1',
        name: '刘晨浩',
        studentId: '2021005623',
        sex: '男',
        group: '一组',
        direction: '人工智能',
        province: '山西',
        college: '计算机学院',
        major: '软件工程',
        majorClass: '软件2190'
      }, {
        id: '2',
        name: '良明炎',
        studentId: '2021005623',
        sex: '男',
        group: '二组',
        direction: 'CPU&OS',
        province: '山西',
        college: '计算机学院',
        major: '软件工程',
        majorClass: '软件2190'
      }, {
        id: '3',
        name: '桥泽涛',
        studentId: '2021005623',
        sex: '男',
        group: '三组',
        direction: 'JAVA',
        province: '山西',
        college: '计算机学院',
        major: '软件工程',
        majorClass: '软件2190'
      }, {
        id: '4',
        name: '郭一鸣',
        studentId: '2021005623',
        sex: '男',
        group: '四组',
        direction: '全栈',
        province: '山西',
        college: '计算机学院',
        major: '软件工程',
        majorClass: '软件2190'
      }, {
        id: '5',
        name: '康佳会',
        studentId: '2021005623',
        sex: '男',
        group: '五组',
        direction: '人工智能',
        province: '山西',
        college: '计算机学院',
        major: '软件工程',
        majorClass: '软件2190'
      }],
      // 选中信息列表
      multipleSelection: [],
      // 信息匹配规则
      rules: {
        id: [{ required: true, message: '必填选项', trigger: 'change' }],
        name: [{ required: true, message: '必填选项', trigger: 'change' }],
        studentId: [{ required: true, message: '必填选项', trigger: 'change' }],
        sex: [{ required: true, message: '必填选项', trigger: 'change' }],
        group: [{ required: true, message: '必填选项', trigger: 'change' }],
        direction: [{ required: true, message: '必填选项', trigger: 'change' }],
        province: [{ required: true, message: '必填选项', trigger: 'change' }],
        college: [{ required: true, message: '必填选项', trigger: 'change' }],
        major: [{ required: true, message: '必填选项', trigger: 'change' }],
        majorClass: [{ required: true, message: '必填选项', trigger: 'change' }]
      },
      // 增改表格临时中转的数据
      temp: {
        id: '',
        name: '',
        studentId: '',
        sex: '',
        group: '',
        direction: '',
        province: '',
        college: '',
        major: '',
        majorClass: ''
      },
      // 方向选择配置
      directionSelect: [
        {
          value: '人工智能',
          label: '人工智能'
        },
        {
          value: 'CPU&OS',
          label: 'CPU&OS'
        },
        {
          value: 'JAVA',
          label: 'JAVA'
        },
        {
          value: '全栈',
          label: '全栈'
        },
        {
          value: '秘书处',
          label: '秘书处'
        },
        {
          value: '设计',
          label: '设计'
        }
      ]
    }
  },
  computed: {
    // 学生信息列表长度
    total() {
      return this.listData.length
    }
  },
  created() {
    // 获取表格数据
    this.fetchData()
  },
  methods: {
    // 获取表格信息
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    // 重置增删表格信息
    resetTemp() {
      this.temp = {
        id: '',
        name: '',
        studentId: '',
        sex: '',
        group: '',
        direction: '',
        province: '',
        college: '',
        major: '',
        majorClass: ''
      }
    },
    // 操作添加信息
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 确认添加信息
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.temp.id = Math.floor(Math.random() * 20 - 10) // mock a id
          this.listData.unshift(this.temp)
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    // 操作编辑信息
    handleUpdate(row, index) {
      this.temp = Object.assign({}, row) // copy obj
      this.editingIndex = index
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 确认更新信息
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          this.listData.splice(this.editingIndex, 1, tempData)
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    // 删除单列表格信息
    handleDelete(row, index) {
      this.$notify({
        title: '成功',
        message: '删除成功',
        type: 'success',
        duration: 2000
      })
      this.listData.splice(index, 1)
    },
    // 删除选中的内容
    handleDeleteAll() {
      // 在此处请求删除多个数据的接口
      console.log(this.multipleSelection)
    },
    // 表格选中状态改变
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 筛选表格数据(搜索功能改变列表框)
    handleFilter() {
      this.getList()
    },
    // 下载excel表格 这里下载的是当前展示的内容
    // 可自行更改为请求下载全部数据
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['ID', '姓名', '学号', '性别', '适应期小组', '方向', '省份', '学院', '专业', '专业班级']
        const filterVal = ['id', 'name', 'studentId', 'sex', 'group', 'direction', 'province', 'college', 'major', 'majorClass']
        const data = this.formatJson(filterVal)
        console.log(data)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '数据表'
        })
        this.downloadLoading = false
      })
    },
    // 将对象列表转化为可可用列表
    formatJson(filterVal) {
      return this.listData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>

<style scoped>
.operationArea{
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.pagination{
  width: 100%;
  padding: 15px;
}

</style>
